<!DOCTYPE html>
<html lang="en">
<head>
    <!--includes meta tags, title and more header definitions-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <link rel="icon" type="image/png" href="">
    <title></title>
    <link href="${ctx}/static/mobileweb/assets/css/font-open.css" rel="stylesheet" type='text/css'>
    <link href="${ctx}/static/mobileweb/assets/css/normalize.css" rel="stylesheet" type='text/css'>
    <link href="${ctx}/static/mobileweb/assets/css/furatto.css" rel="stylesheet" type='text/css'>
    <link href="${ctx}/static/mobileweb/assets/css/font-awesome.css" rel="stylesheet" type='text/css'>
    <link href="${ctx}/static/mobileweb/assets/css/znc.css" rel="stylesheet" type='text/css'>
</head>
<body>

<div class="row">
    <div class="login-form">
        <h3>会员注册</h3>
        <br/>

        <form action="" id="check_form" method="post" accept-charset="utf-8">
            <label for="name">姓名:</label>
            <input type="text" name="name" id="name" placeholder="请输入您的姓名" required/>
            <label for="phone">请输入手机号码:</label>


            <input type="tel" name="phone" id="phone" placeholder="请输入手机号码" required/>
            <label for="code">手机验证码:</label>

            <div class="input-addon">
                <input type="number" name="code" id="code" value="" class="addon-field" required/>
                <a class="addon primary" id="pull_code">获取验证码</a>
            </div>
            <input type="submit" id="ok_btn" value="确定" class="button primary"/>
            <input type="reset" id="cancel" value="重置" class="button"/>
        </form>
    </div>
</div>

<script id="alert_template" type="text/x-handlebars-template">
    <div class="alert">
        <a href="#" class="close">x</a>
        {{message}}
    </div>
</script>

<script src="${ctx}/static/mobileweb/scripts/jquery-1.7.2.min.js"></script>
<script src="${ctx}/static/mobileweb/scripts/jquery-html5Validate.js"></script>
<script src="${ctx}/static/scripts/handlebars.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/static/mobileweb/assets/js/furatto.min.js"></script>
<script type="text/javascript">
    var alert_tpl = Handlebars.compile($('#alert_template').html());

    $(document).ready(function () {
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            WeixinJSBridge.call('hideToolbar');
        });
        var for_action = '${ctx}/mobileweb/member/check/${mid!}';
        $('#check_form').html5Validate(function () {
            $.post(for_action, {'name': $('#name').val(), 'code': $('#code').val(), 'phone': $('#phone').val()}, function (rst) {
                if (rst.status == 'OK') {
                    window.location.href = '${ctx}/mobileweb/member/complete?mid=${mid!}&wxno=${wxno!}'
                } else {
                    var alert_html = alert_tpl({'message': rst.message});
                    alert(alert_html);
                }
            });
        });

        var countdown;
        var count;
        $('#pull_code').click(function () {
            if ($(this).attr('disabled')) {
                return false;
            }
            var phone = $('#phone').val();
            if (!phone) {

                alert(alert_tpl({message: '请输入手机号码!'}));
                return false;
            }
            if(!send_status){
                return false;
            }
            $.ajax({
                url    : '${ctx}/mobileweb/member/code',
                data   : {'phone': phone},
                type   : 'post',
                cache  : false,
                success: function (rst) {
                    var alert_html = '';
                    if (rst.status == 'OK') {
                        alert_html = alert_tpl({'message': '验证码发送成功，请在30秒之内输入！'});
                        var $code = $('#code');
                        $code.val('');
                        $code.focus();
                        count = 60;
                        var $pullCode = $("#pull_code");
                        $pullCode.attr("disabled", true);
                        $pullCode.removeClass('primary').addClass('default');
                        countdown = setInterval(CountDown, 1000);

                    } else {
                        alert_html = alert_tpl({'message': rst.message});
                    }

                    alert(alert_html);
                }
            })
        });
        var send_status = true;
        function CountDown() {
            var $pullCode = $("#pull_code");
            $pullCode.html('&nbsp;&nbsp;&nbsp;&nbsp;' + count + '&nbsp;&nbsp;&nbsp;&nbsp;');
            if (count == 0) {
                send_status = false;
                $pullCode.html("重新获取验证码").removeAttr("disabled");
                $pullCode.removeClass('default').addClass('primary');
                clearInterval(countdown);
            }
            count--;
        }

        var alert = function (html) {
            $('#check_form').prepend(html);
            setTimeout(function () {
                $('#check_form').find('div.alert').slideUp();
            }, 3000)
        }
    });
</script>
</body>
</html>